<template>
  <view class="user">
    <u-modal :show="Mshow" title="请确认是否退出当前用户" @confirm="confirm" @cancel=" cancel" :showCancelButton="true">
    </u-modal>
    <view class="top">
      <view class="group">
        <view class="userinfo">
          <view class="pic">
            <image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url" mode="aspectFill"></image>
            <image v-else src="../../static/tabbarIcon/mineEnd.jpg" mode="aspectFill"></image>
          </view>
          <view class="text" v-if="hasLogin&&userInfo.nickname||userInfo.username">
            <view class="nickname">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</view>
            <view class="year">
              <uni-dateformat :date="userInfo.register_date" :threshold="[3600,99*365*24*60*60*1000]">
              </uni-dateformat>
              注册
            </view>
          </view>
          <view class="text" v-else>
            <view class="nickname" @click="goLogin">点击登录</view>
          </view>
        </view>

        <view v-if="hasLogin&&userInfo.nickname||userInfo.username" class="more" @click="goUserInfo">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

      <view class="bg">
        <image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url" mode="aspectFill"></image>
        <image v-else src="../../static/tabbarIcon/mineEnd.jpg" mode="aspectFill"></image>
      </view>
    </view>

    <view class="main">
      <view class="info">
        <view class="item"><text>{{likeNum}}</text>获赞</view>
        <view class="item"><text>{{commentNum}}</text>评论</view>
        <view class="item"><text>{{articleNum}}</text>发文</view>
        <view class="item"><text>{{articleViewNum}}</text>发文浏览量</view>
      </view>

      <view class="list">
        <view class="group">
          <view class="item" @click="goLongArticle">
            <view class="left"><text class="iconfont bule  icon-shenbao"></text><text class="text">我的长文</text></view>
            <view class="right">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="item" @click="goLike">
            <view class="left"><text class="iconfont bule icon-zan1"></text><text class="text">我的点赞</text>
            </view>
            <view class="right">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="item">
            <view class="left"><text class="iconfont bule icon-bianji"></text><text class="text">评论过的</text>
            </view>
            <view class="right">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>

        <view class="group">
          <view class="item">
            <view class="left"><text class="iconfont bule icon-xiangqing"></text><text class="text">关于</text></view>
            <view class="right">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="item" @click="goFeedback">
            <view class="left"><text class="iconfont bule icon-xinxi"></text><text class="text">意见反馈</text>
            </view>
            <view class="right">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>

        <view class="group" v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url">
          <view class="item" @click="logOut">
            <view class="left"><text class="iconfont bule icon-tuichudenglu"></text><text class="text">退出登录</text></view>
            <view class="right">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
const db = uniCloud.database();
import {
  store,
  mutations
} from "../../uni_modules/uni-id-pages/common/store.js";
export default {
  data() {
    return {
      Mshow: false,
      likeNum: 0,
      articleNum: 0,
      commentNum: 0,
      articleViewNum: 0
    };
  },

  computed: {
    userInfo() {
      return store.userInfo;
    },
    hasLogin() {
      return store.hasLogin;
    }
  },
  onLoad() {
    this.getPersonalData();
  },
  methods: {
    // 获取个人页面数据统计
    async getPersonalData() {
      if (!this.hasLogin) return;
      // 获取发文数量
      let { result: article } = await db
        .collection("quanzi_article")
        .where({
          user_id: uniCloud.getCurrentUserInfo().uid
        })
        .get();
      let articleArr = [];
      article.data.forEach(value => {
        if (!value.delStatus) {
          articleArr.push(articleArr);
        }
      });
      this.articleNum = articleArr.length;

      // 获取点赞数量
      let { result: likes } = await db
        .collection("quanzi_article")
        .where({
          user_id: uniCloud.getCurrentUserInfo().uid
        })
        .groupBy("user_id")
        .groupField("sum(like_count) as totalScore")
        .get();
      this.likeNum = likes.data[0].totalScore;

      // 获取发文浏览量
      let { result: articleView } = await db
        .collection("quanzi_article")
        .where({
          user_id: uniCloud.getCurrentUserInfo().uid
        })
        .groupBy("user_id")
        .groupField("sum(view_count) as viewTotalScore")
        .get();
      this.articleViewNum = articleView.data[0].viewTotalScore;

      // 获取发文评论量
      let { result: commentView } = await db
        .collection("quanzi_article")
        .where({
          user_id: uniCloud.getCurrentUserInfo().uid
        })
        .groupBy("user_id")
        .groupField("sum(comment_count) as commentTotalScore")
        .get();

      this.commentNum = commentView.data[0].commentTotalScore;
    },
    // 意见反馈
    goFeedback() {
      if (this.noLogin()) {
        uni.navigateTo({
          url: "/uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback"
        });
      }
    },
    // 我的点赞
    goLike() {
      if (this.noLogin()) {
        uni.navigateTo({
          url: "/pages/quanzi_like/list"
        });
      }
    },
    // 退出登录
    logOut() {
      this.Mshow = true;
    },
    // 去登陆
    goLogin() {
      uni.navigateTo({
        url: "/uni_modules/uni-id-pages/pages/login/login-withpwd"
      });
    },
    // 退出登录确认
    confirm() {
      mutations.logout();
      setTimeout(() => {
        this.Mshow = false;
      }, 0);
    },
    // 退出登录取消
    cancel() {
      this.Mshow = false;
    },
    // 去个人中心
    goUserInfo() {
      uni.navigateTo({
        url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo"
      });
    },
    // 去我的长文
    goLongArticle() {
      if (this.noLogin()) {
        uni.navigateTo({
          url: "/pages/quanzi_article/list"
        });
      }
    },
    // 判断用户是否登录
    noLogin() {
      if (!this.hasLogin) {
        uni.showToast({
          title: "请先登录",
          icon: "error"
        });
        return false;
      } else {
        return true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bule {
  color: #0199fe;
  font-size: 34rpx !important;
}

.user {
  .top {
    height: 300rpx;
    background: #bbb;
    padding: 0 30rpx;
    padding-top: var(--status-bar-height);
    position: relative;
    display: flex;
    align-items: center;

    .group {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      color: #fff;

      .userinfo {
        display: flex;
        width: 100%;
        align-items: center;

        .pic {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          overflow: hidden;
          border: 2px solid #fff;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .text {
          padding-left: 20rpx;

          .nickname {
            font-size: 44rpx;
            font-weight: 600;
          }

          .year {
            font-size: 26rpx;
            opacity: 0.6;
            padding-top: 5rpx;
          }
        }
      }

      .more {
        .iconfont {
          font-size: 40rpx;
        }
      }
    }

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
        filter: blur(20px);
        transform: scale(2);
        opacity: 0.5;
      }
    }
  }

  .main {
    width: 100%;
    min-height: 200rpx;
    background: #fff;
    border-radius: 30rpx;
    transform: translateY(-30rpx);
    padding: 30rpx 0;

    .info {
      padding: 10rpx 30rpx;
      display: flex;
      font-size: 30rpx;

      .item {
        padding-right: 20rpx;
        color: #888;

        text {
          margin-right: 10rpx;
          font-weight: 600;
          color: #333;
        }
      }
    }

    .list {
      .group {
        padding: 15rpx 30rpx;
        border-bottom: 15rpx solid #f4f4f4;

        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 25rpx 0;
          font-size: 36rpx;
          color: #555;
          border-bottom: 1rpx solid #f8f8f8;

          .left {
            display: flex;
            align-items: center;

            .iconfont {
              font-size: 38rpx;
              margin-right: 10rpx;
            }
          }

          .right {
            .iconfont {
              font-size: 26rpx;
            }
          }
        }

        .item:last-child {
          border: none;
        }
      }

      .group:last-child {
        border: none;
      }
    }
  }
}
</style>
